import './myhome.css';
import TestModle from '../testModle/testModle'
import TestClass from '../testClassComponent/testClass'
import React from 'react';



class Myhome extends React.Component {
  constructor(props){
    super(props)
    this.state = { val:'变链子',name:'好孩子',changeVal: 0, fatherVal:1,bro:2};
    this.changePropsVal = this.changePropsVal.bind(this);
    this.changeFatherVal = this.changeFatherVal.bind(this);
    this.changeBroVal = this.changeBroVal.bind(this);
  }
  // 改变传的值
  changePropsVal(){
    this.setState({changeVal:this.state.changeVal + 1})
  }
  //子组件改变父组件的值
  changeFatherVal(){
    this.setState({fatherVal:this.state.fatherVal + 4})
  }
  changeBroVal(){
    this.setState({bro:this.state.bro + 10})
  }
  render (){
    return  <div className='homeDiv'>
              <p>来吧，展示</p>
              <button onClick={this.changePropsVal}>父组件改变传给子组件的值</button>
              <TestModle val={this.state.val} bro={this.state.bro} />
              <TestClass name={this.state.name} changeVal={this.state.changeVal} changeFatherVal={this.changeFatherVal} changeBroVal={this.changeBroVal} />
              <h6>子组件改变父组件的值{this.state.fatherVal}</h6>
            </div>
  }
  
}

export default Myhome;